<template>
  <Modal :title="title"
         id="edit-notes"
         v-model="visible"
         :mask-closable="false"
         width="800px">
    <editor class="editor"
            ref="editor"
            :value="content"
            @on-change="handleChange" />
    <div slot="footer">
      <Button @click="visible=false">取消</Button>
      <Button type="primary"
              @click="clearContent">清空</Button>
      <Button type="primary"
              @click="save">保存</Button>
    </div>
  </Modal>
</template>
<script>
import { updateStudentNotes, updateTeacherNotes } from '@/api/data.js'
import Editor from '_c/editor'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      visible: false,
      content: '',
      data: {

      }
    }
  },
  computed: {
    ...mapState({
      roleId: state => state.user.roleId
    })
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    logContent: {
      type: String,
      default: ''
    }
  },
  methods: {
    init (row) {
      this.visible = true
      this.data = row
      this.$nextTick(() => {
        if (row.content) {
          this.$refs.editor.setHtml('' + row.content)
        } else {
          this.$refs.editor.setHtml('')
        }
      })
    },
    handleChange (html, text) {

    },
    clearContent () {
      this.$refs.editor.setHtml('')

    },
    save () {

      // userId，courseId，content，
      const { userId, courseId, status, id } = this.data
      let content = this.$refs.editor.getHtml()
      if (this.$refs.editor.getTxt() == '') {
        content = ''
      }

      if (this.roleId == '3') {
        updateStudentNotes({ userId, courseId, content, status, id }).then((res) => {

          this.$emit('refreshDataList')
          this.visible = false
        })
      } else if (this.roleId == '2') {
        updateTeacherNotes({ userId, courseId, content, status, id }).then((res) => {

          this.$emit('refreshDataList')
          this.visible = false
        })
      }

      this.data = {}
    }
  },
  components: {
    Editor
  }
}
</script>